<template>
    <view class="mylist">
        <!-- <view class="tabBox">
            <image class="banner4" :src="bannerUrl" style="width: 100%;"></image>
            <view class="tabName">我的借款记录</view>
        </view> -->
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
        <view class="result_box" v-if="current == 0">
            <view class="tabItem" v-for="item in tableList" :key="item.id" style="margin-bottom: 10px;"
                v-if="tableList.length != 0">
                <view class="formData">
                    <view class="formLabel">借款金额：</view>
                    <view class="formValue">{{ item.amount }}</view>
                </view>
                <view class="formData">
                    <view class="formLabel">借款用途：</view>
                    <view class="formValue">{{ item.reason }}</view>
                </view>
                <view class="formData">
                  <view class="formLabel">所属站点：</view>
                  <view class="formValue">{{ item.riderDeptName }}</view>
                </view>
                <view class="formData">
                    <view class="formLabel">借款人：</view>
                    <view class="formValue">{{ item.riderName }}</view>
                </view>
                <view class="formData">
                    <view class="formLabel">借款手机号：</view>
                    <view class="formValue">{{ item.riderPhone }}</view>
                </view>
                <view class="formData">
                    <view class="formLabel">申请日期：</view>
                    <view class="formValue">{{ item.applyTime }}</view>
                </view>
                <u-button type="primary" shape="square" :ripple="true" size="default" @click="checkInfo(item)"
                    class="custom-btn" :throttle-time="5000">查看
                </u-button>
            </view>
            <view v-if="tableList.length == 0" style="text-align: center;color: #67c23a; font-size: 20px">暂无借款记录</view>
        </view>
        <view class="result_box" v-if="current == 1">
        <view class="tabItem" v-for="item in tableList1" :key="item.id" style="margin-bottom: 10px;"
              v-if="tableList1.length != 0">
          <view class="formData">
            <view class="formLabel">姓名：</view>
            <view class="formValue">{{ item.riderName }}</view>
            <view class="formLabel">所属站点：</view>
            <view class="formValue">{{ item.riderDeptName }}</view>
          </view>
          <view class="formData">
            <view class="formLabel">借款金额：</view>
            <view class="formValue">{{ item.amount }}</view>
            <view class="formLabel">借款用途：</view>
            <view class="formValue">{{ item.reason }}</view>
          </view>
          <!--                <view class="formData">-->
          <!--                    <view class="formLabel">借款用途：</view>-->
          <!--                    <view class="formValue">{{ item.reason }}</view>-->
          <!--                </view>-->
          <view class="formData">
            <view class="formLabel">申请日期：</view>
            <view class="formValue">{{ item.applyTime }}</view>
            <view class="formLabel">担保人：</view>
            <view class="formValue">{{ item.guaName }}</view>
          </view>
          <view class="formData">
            <view class="formLabel">进度：</view>
            <view class="formValue">{{ item.statusname }}</view>
          </view>
        </view>
        <view v-if="tableList1.length == 0" style="text-align: center;color: #67c23a; font-size: 20px">暂无借款记录</view>
      </view>
        <!-- <view class="tabBox">
            <image class="successBg" :src="bannerUrl" style="width: 50%;margin-left: 25%;"></image>
            <view class="successMsg">提交成功</view>
        </view> -->
    </view>
</template>
<script>
import { getQueryString } from "@/utils/index.js";
import store from "@/store";
import {getUrlParam} from "../../utils";
export default {
    data() {
        return {
            bannerUrl: require('./success.png'),
            tableList: [],
            tableList1: [],
            list: [{
              name: '借款担保'
            }, {
              name: '担保记录'
            }],
            current: 0
        }
    },
    filters: {
        fiterStatus(val) {
            if (val == 1) {
                return '已担保，未审核'
            } else if (val == 2) {
                return '拒绝担保'
            } else if (val == 3) {
                return '审核通过'
            } else if (val == 4) {
                return '审核拒绝'
            } else if (val == 5) {
                return '已还款'
            } else {
                return '未担保'
            }
        },
        fiterReason(val) {
            if (val == 1) {
                return '新骑手日维度生活费'
            } else if (val == 2) {
                return '生活费'
            } else if (val == 3) {
                return '垫付车辆租金'
            } else {
                return ''
            }
        }
    },
    mounted() {
        // this.getLoanList()
        // this.getUserinfo()
    },
    onLoad(option) {
        console.log(option.type);
        if (option.type == 'yanzheng') {
            this.getList()
        } else {
            this.getLoanList()
        }
    },
    methods: {
        changeTabs(index){
          this.current = index;
          if (this.current == 0) {
            this.getList()
          } else {
            this.getList1()
          }
        },
        fontColor(val) {
            if (val == 1 || val == 3) {
                return 'successColor'
            } else if (val == 2 || val == 4) {
                return 'errorColor'
            }
        },
        async getList1() {
          let query = {
            openid: uni.getStorageSync("openidd"),
            phone: uni.getStorageSync("jiekuanMobile")
          }
          this.tableList1 = []
          let res1 = await this.$api.jiekuan.getMySecurityList(query)
          this.tableList1 = res1.data.rows
        },
        async getList() {
            let query = {
                status: 0,
                guaPhone: uni.getStorageSync("jiekuanMobile")
            }
            let res1 = await this.$api.jiekuan.getLoanList(query)
            this.tableList = res1.data.rows
        },
        async getLoanList() {
            let code = getQueryString("code");
            let deptId = 121;
            let res = await this.$api.user.withoutLogin({
                code,
                deptId,
                inductionType: getUrlParam("type")?(getUrlParam("type") == 'operateRegister'?2:1): 1
            });
            uni.setStorageSync("token", res.data.token);
            uni.setStorageSync("openidd", res.data.openid);
            let query = {
                openid: res.data.openid
            }
            let resss = await this.$api.jiekuan.getUserinfo(query);
            if (resss.data && resss.data.phoneNumber) {
                let query = {
                    status: 0,
                    guaPhone: resss.data.phoneNumber
                }
                uni.setStorageSync("jiekuanMobile", resss.data.phoneNumber);
                let res1 = await this.$api.jiekuan.getLoanList(query);
                this.tableList = res1.data.rows;
            } else {
                store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/yanzheng");
            }
        },
        async checkInfo(row) {
            uni.setStorageSync("loanid", row.id);
            store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/index");
        },
    }
}
</script>
<style lang="scss">
.mylist {
    .tabBox {
        position: relative;

        uni-image {
            height: 200rpx;
        }

        .tabName {
            color: #fff;
            font-size: 24px;
            margin: 0;
            padding-left: 30px;
            padding-top: 30px;
            position: absolute;
            top: 0;
            left: 80px;
        }
    }

    .result_box {
        margin: 10px;

        .tabItem {
            padding: 10px;
            background-color: #f3f4f6;
            box-shadow: 0 0 22px #333;

        }

        .formData {
            overflow: hidden;
            line-height: 40px;
            min-height: 40px;
            max-height: 80px;

            .formLabel {
                float: left;
                width: calc(30% - 2px);
                text-align: center;
                height: 100%;
                text-align-last: justify;
            }

            .formValue {
                float: left;
                width: 70%;
                height: 100%;
                text-align: left;
            }

            &:nth-of-type(5) {
                .formValue {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }
            }
        }

        uni-button {
            width: 80%;
            height: 40px;
        }

        .successColor {
            color: #67C23A;
        }

        .errorColor {
            color: #F56C6C;
        }
    }

    .successBg {
        margin-top: 26%;
    }

    .successMsg {
        color: #2D7FFC;
        font-size: 16px;
        margin-top: 2%;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        text-align: center;
    }

    .successInfo {
        width: 90%;
        margin: 0 auto;

        p {
            font-size: 14px;
            line-height: 21px;
        }
    }
}</style>
